<?php
require_once('config.php');

  $sql="select * from picture where is_open=1 order by updateTime limit 8";

    $res = $con->query($sql);

    $num = mysqli_fetch_array($con->query("select count(*) from picture"));

    $num = $num[0];

    $data = array();
while($row = mysqli_fetch_assoc($res)){
    $data[] = $row;
}

?>

<!docType html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />

    <link rel="stylesheet" href="css/991939cafa0343d781d3eba9e3bd5ffb.css" />
    <link rel="stylesheet" href="css/0b246469176b4b6ca3ce49654ba75d82.css" />
    <link rel="stylesheet" type="text/css" href="css/swiper-4.3.2.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-4.0.0.min.css" />
    <link rel="stylesheet" href="css/fontawesome-all-5.0.9.min.css" />

    <link rel="stylesheet" href="css/global.css" />
    <link rel="stylesheet" media="screen and (min-width: 1200px)" href="css/global.large.css">
    <link rel="stylesheet" media="screen and (max-width: 991px)" href="css/global.tablet.css">
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/global.mobile.css">
    <link rel="stylesheet" href="css/loading.css" />
 <!--        Secondary CSS       -->
    <link rel="stylesheet" href="css/simplelightbox.min.css"/>
    <link rel="stylesheet" href="css/why-choose-us.css" />
    <link rel="stylesheet" media="screen and (max-width: 991px)" href="css/why-choose-us.tablet.css" />


    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/news.mobile.css">

    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/portfolio.mobile.css">

    <link rel="stylesheet" href="css/comics.css" />
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/comics.mobile.css">


    <link rel="stylesheet" href="css/contact-us.css" />

    <link rel="stylesheet" href="css/our-partners.css" />
    <link rel="stylesheet" media="screen and (max-width: 767px)" href="css/our-partners.mobile.css">
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEO3TWX1r4bJBNSf34xWPGGLvcjqtKX4k" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        ul,ul li{
            list-style: none;
        }
        main .light-theme1 {background: url(img/backgrpund_99.jpg) left top/100% 100%;}
        .type li{margin-bottom:12px!important;}
        .type li h4{margin-top:8px!important;}
        @media all and (orientation : landscape) { 
           .swiper-slide img {max-height:100%!important;}
} 
    </style>
</head>
<body onload="init()">
    <div class="background"></div>
    <header class="brand">
        <h1 class="logo">
            <span>良師棚業有限公司</span>
        </h1>

        <div style="padding:0 5%;">
            
        <img data-original="img/xieti.png" style="margin-right: 6px; width:100%;" />

        </div>

        <!--<i class="fas fa-chevron-down"></i>-->
        <div class="top_box_2" style="position: absolute;text-align: center;top: 55%; left: 48%;">
                    
                        <p style="text-align: center;margin-top:60px;">
                            <img   src="img/guide2.gif"  class="img_first" style="display:inline-block;text-align: center;width: 30px;height: 30px;"/></p>
                </div>
    </header>
    <nav>
        <a class="logo" href="wap_home.php" style="margin:0 auto;width: 15%;">
          <div style="text-align: center;"><img class="lazy" data-original="img/home.png" style="width: 70%;" /></div>
        </a>
        <a class="logo" target='_blank' href="https://api.whatsapp.com/send?phone=85268801666" style="margin:0 auto;width: 70%;">
          <div style="text-align: center;display: block;margin:0 auto;"><img class="lazy" data-original="img/logo_phone1.png" style="width: 80%;" /></div>
        </a>
        <div class="tablet mobile bars" style="width: 15%;"><i class="far fa-bars" style="line-height: 76px;"></i></div>
        <ul>
            <!-- <li data-section=""><a target='_blank' href="https://api.whatsapp.com/send?phone=85268801666"><img style="width: 94px;" class="lazy" data-original="img/logo_phone1.png" style="margin-right: 6px;" /></a></li> -->

            <li data-section="why-choose-us">為何選擇我們</li>

            <li data-section="sevices">服務範圍</li>

            <li data-section="type">報價及搭棚流程</li>

            <li data-section="articles">最新資訊</li>

            <li data-section="contact-us">聯絡我們</li>

            <li data-section=""><a href="wap_home_en.php" style="color: #fff">EN</a></li>
        </ul>
    </nav>

    <main>
        <!--            Why choose us           -->
        <section class="why-choose-us dark-theme" id="why-choose-us">
            <content class="container">
                <h2>為何選擇我們</h2>

                <ul class="row">
                   <li class="col-md-6 col-sm-12">
                       <img class="lazy" data-original="img/inco_money.png"/>
                        <h3>價格實惠</h3>
                        <p style="text-align: left;">我們清楚了解客戶的需求為客戶提供精準
                                的棚架搭建方案絕不會見蛇添竹以最佳方案，
                                省時並有效的完成棚架搭建，為客戶大幅度節省成本</p>
                    </li>

                   <li class="col-md-6 col-sm-12">
                      <img class="lazy" data-original="images/fuwu_icon.png"/>
                        <h3>服務優質</h3>
                        <p style="text-align: left;">我們清楚明白，棚架，是工人安全施工的平台，一個安全穩妥有質量的棚架,會很有效地為客戶提升施工效率，所以我們絕不馬虎求其，拒絕偷工減料。</p>
                    </li>

                   <li class="col-md-6 col-sm-12">
                       <img class="lazy" data-original="images/heat.png"/>
                        <h3>認真慬慎</h3>
                        <p style="text-align: left;">我們是一個敬業的團隊，團隊的每一位師傅均持有政府認可的專業資格，我們的每位工作人員都非常小心認真並慬慎地對待搭棚工作，多年的高空工作經驗，讓我們清晰地知道高空工作的風險所在。</p>
                    </li>

                   
                    

                   <li class="col-md-6 col-sm-12">
                       <img class="lazy" data-original="images/fanglv_icon.png"/>
                        <h3>安全可靠</h3>
                        <p style="text-align: left;">
                           師傅在進行搭棚工作時不僅要顧及自身的安全，更要確保日後棚架在使用期間的施工人員和附近的民眾因為我們搭建的棚架而受到有效的保護，全面地做好安全措施，將高空工作的風險降為零，被我們視為搭棚的最基本的責任。
                        </p>
                    </li>
                </ul>
               
            </content>
        </section>

        <!--           OUR SERVICES         -->
        <section class="sevices light-theme1" id="news">
            <content class="container">
                <h2 style="color: #124d73;">服務範圍</h2>

               <div class="three_ul">
                        <ul>
                            <li class="col-md-4">
                                <span>香&nbsp;港</span>
                                <img class="lazy" data-original="images/yes_icon.png"/>
                            </li>
                            
                            <li class="col-md-4">
                                <span >九&nbsp;龍</span>
                                <img class="lazy" data-original="images/yes_icon.png"/>
                            </li>
                            
                            <li class="col-md-4">
                                <span>新&nbsp;界</span>
                                <img class="lazy" data-original="images/yes_icon.png"/>
                            </li>
                            
                        </ul>
                    </div>
                    <div class="three_font_thr_img" style="width: 100%;margin-top: 10%;">
                        <div class="three_img_img" style="margin:0 auto;width: 100%;">
                            <img width="100%" class="lazy" data-original="images/img_thr.png"/>
                        </div>
                        
                        <div class="three_four_img" style="float: left;width: 100%;margin-top: 4%;">
                            <div class="three_four_img" style="margin: 0 auto;width: 100%;">
                                <img width="100%" class="lazy" data-original="images/five.png"/>
                            </div>
                        </div>
                        
                    </div>
            </content>
        </section>
        <div class="clear"></div>
        <!--        Our  type           -->
        <section class="ussevices dark-theme"  style="background: url(img/06.jpg) no-repeat ;background-size:cover;color:#FFF;">
            <content class="container">
                <h2 style="text-align:center;">我們的服務</h2>

                <ul class="row">
                  

                   <li class="col-md-6 col-sm-12">
				   <div class="liimg">


                      <img class="lazy" data-original="images/sever2.jpg"  />

                         </div> 
					 <div class="lip">
                     <h3>梯棚</h3>
                        <p style="text-align: left;">(為水喉，煤氣喉及各類喉管的更換,安裝或維修工程提供所需的搭棚服務）</p>
						</div>
				   </li>

                   <li class="col-md-6 col-sm-12">
				   <div class="liimg liimg1">
                      <img class="lazy" data-original="images/sever3.jpg"  />
                        </div> 
					 <div class="lip">
                     <h3>維修雙棚</h3>
                        <p style="text-align: left;"> (為村屋/大廈外牆灰水,油漆,防水,翻新工程提供所需的搭棚服務)</p>
						</div>
				  </li>
					
					 <li class="col-md-6 col-sm-12">
					<div class="liimg liimg1">
                       <img class="lazy" data-original="images/sever1.jpg"  />
                     </div> 
					 <div class="lip">
                     <h3>吊棚</h3>
                        <p style="text-align: left;">
                        	(為鋁窗，分體機，水喉，及各類喉管的安裝或維修和僭建清拆工程提供所需的搭棚服務）
                        </p>
						</div>
                    </li>
                   <li class="col-md-6 col-sm-12">
				   <div class="liimg">
                      <img class="lazy" data-original="images/sever4.jpg"  />
                        </div> 
					 <div class="lip">
                     <h3>室內外天花棚架/竹棚</h3>
                        <p style="text-align: left;">
                            (為維修消防喉，天花板，風槽線槽等工程提供所需的搭棚服務)
                        </p>
						</div>
					</li>
                </ul>
               
         
                <ul class="row" >
                   <li class="col-md-6 col-sm-12" style="text-align:left;">
				   <div class="liimg liimg1">


                      <img class="lazy" data-original="images/sever5.jpg"  />

                        </div> 
					 <div class="lip">
                     <h3>清拆棚架/竹棚</h3>
                        <p style="text-align: left;">
                        	(為清拆工程提供所搭棚服務）
                        </p>
                    </li>

                   <li class="col-md-6 col-sm-12">
				   <div class="liimg">
                     <img class="lazy" data-original="images/sever6.jpg"  />
                      </div> 
					 <div class="lip">
                     <h3>招牌棚架/竹棚</h3>
                        <p style="text-align: left;">(為清橫身招牌工程提供所搭棚服務)</p>
						</div>                    
				   </li>

                   <li class="col-md-6 col-sm-12">
				   <div class="liimg liimg1">
                      <img class="lazy" data-original="images/sever7.jpg"  />
                       </div> 
					 <div class="lip">
                     <h3>門面棚架/竹棚</h3>
                        <p style="text-align: left;"> (為清門面招牌或冷氣暗架工程提供所搭棚服務)</p>
						 </div>
					</li>

                   <li class="col-md-6 col-sm-12">
				   <div class="liimg">
                     <img class="lazy" data-original="images/sever8.jpg"  />
                       </div> 
					 <div class="lip">
                     <h3>竹棚,金屬棚,混合棚工程，</h3> 
                        <p style="text-align: left;">
                          (均可承接，歡迎查詢)
                        </p>
						 </div> 
				   </li>
                </ul>
               
            </content>
        </section>		
<div class="clear"></div>
      <section class="type dark-theme" id="portfolio">
            <content class="container">
                <h2  style="color: #124d73;">報價及搭棚流程</h2>
				<ul style="margin-top:5%">
					<li class="col-md-3 col-sm-12">
						
							<img class="lazy" data-original="img/icon5.png"  />
							<h4>1.講述需求</h4>
							<p>客戶致電搭棚報價熱線</p>
							<p>6880 1666或用WHATSAPP講述需求</p>
						
					</li>
						<li  class="col-md-3 col-sm-12">
						
							<img class="lazy" data-original="img/icon6.png" />
							<h4>2.初步報價</h4>
							<p>本公司按客戶的工程需</p>
							<p>要免費制定搭棚方案，並進行初步報價</p>
						
					</li>
					<li  class="col-md-3 col-sm-12">
						<div>
							<img class="lazy" data-original="img/icon7.png" />
							<h4>3.落實方案</h4>
							<p>客戶落實方案，並向</p>
							<p>本公司預約棚架/竹棚搭建的日期</p>
						</div>
					</li>
					<li  class="col-md-3">
						<div>
							<img class="lazy" data-original="img/icon8.png" />
							<h4>4.進行搭棚</h4>
							<p>本公司"如期"到達"工作"場地</p>
							<p>進行並完成棚架/竹棚搭建工作 </p>
						</div>
					</li>
				</ul>
				<ul >
						<li  class="col-md-3">
							
								<img class="lazy" data-original="img/icon1.png" />
								<h4>5.完成施工</h4>
								<p>客戶利用棚架/竹棚安全</p>
								<p>有效地完成施工</p>
							
						</li>
							<li   class="col-md-3">
								<img class="lazy" data-original="img/icon2.png" />
								<h4>6.預約拆卸</h4>
								<p>客戶通知本公司施工完成，</p>
								<p>並預約拆卸棚架/竹棚日期</p>
						</li>
						<li  class="col-md-3">
							
								<img class="lazy" data-original="img/icon3.png" />
								<h4>7.拆卸棚架</h4>
								<p>本公司如期到達工作場</p>
								<p>地步進行並完成拆卸棚架/竹棚工作</p>
							
						</li>
						<li  class="col-md-3">
							
								<img class="lazy" data-original="img/icon4.png" />
									<h4>8.合作完成</h4>
								<p>工作順利完成，現貨後款，信心保證</p>
							
						</li>
					</ul>
            </content>
        </section>
     

        <script>
            $('.col-md-3').css('text-align','center');

        </script>

     	<!--  业务流程结束-->
        <!--            Articles      -->
        <section class="articles dark-theme " id="articles">
            <!--<content class="container" style="margin: 0;padding: 0;">-->
                <h2 style="text-align: center;">搭棚案例欣賞</h2>
				
				<style>
				@media only screen and (max-width: 1000px) {
					.ussevices .liimg {  display:block!important;width: 90%!important;height: 220px!important;float:none!important;margin:auto;}
					.ussevices .liimg img { width:100%!important;}
					.ussevices .lip { width:auto!important;text-align:center;}
				.share {
					  display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 500px;
	line-height:500px;
				}
					.share img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}
				}
				</style>
                <div class="swiper-container share" style="padding: 0;">
                    <div class="swiper-wrapper">
                    <?php foreach($data as $v){ ?>
                        <div class="swiper-slide" style="overflow: hidden;">    
                            <img src="hk-admin/upload/<?php echo $v['url']?>"  width="100%"/>
                        </div>
                    <?php };?>
                        <!-- <div class="swiper-slide" style="overflow: hidden;">
                            <img class="lazy" data-original="images/background_2.jpg" width="100%"/>
                        </div> -->
                    </div>
                    <!-- 如果需要分页器 -->
                    <!--<div class="swiper-pagination"></div>-->
    <style type="text/css">
        .swiper-button-prev {border: none;outline: none; left: 50px;background-size: 50px 50px;}
        .swiper-button-next {border: none;outline: none; right: 50px;background-size: 50px 50px;}
    </style>
                      <div class="swiper-button-prev  swiper-button-white" ></div>
                        <div class="swiper-button-next  swiper-button-white" ></div>
                </div>
            <!--</content>-->
        </section>

        <!--            Contact Us      -->
        <section class="contact-us light-theme" id="contact-us">
            <content class="container">
                <h2>聯絡我們</h2>

                <ul class="row">
                    <li class="col-12">
                    </li>

                    <li class="col-md-6">
                        <a href="mailto:contact@gm-scaffolding.com"><i class=""><img class="lazy" data-original="img/email.png"/></i>
                        <span>
                            contact@gm-scaffolding.com
                            <!--<i class="fal fa-angle-double-right"></i>-->
                        </span></a>
                    </li>

                    <li class="col-md-6">
                        <a target="_blank" href="https://api.whatsapp.com/send?phone=85268801666"><i class=""><img class="lazy" data-original="img/phone.png"/></i>
                        <span>
                           +852 6880-1666 mobile
                            <!--<i class="fal fa-angle-double-right"></i>-->
                        </span></a>
                    </li>

                    <li class="col-md-6">
                        <a>
                            <i class=""><img class="lazy" data-original="img/mobile2.png"/></i>
                            <span>
                                +852 3678-8457 office
                                <!--<i class="fal fa-angle-double-right"></i>-->
                            </span>
                        </a>
                    </li>

                    <li class="col-md-6">
                    <a>
                        <i class=""><img class="lazy" data-original="img/fax.png"/></i>
                        <span>
                            +852 3005-8573 fax
                            
                            <!--<i class="fal fa-angle-double-right"></i>-->
                        </span></a>
                    </li>

                    <li class="col-md-6">
                    <a href="javascript:void(0);" onclick="toMap1();">
                        <i class=""><img class="lazy" data-original="img/address2.png"/></i>
                        <span>
                           新界元朗崇正新村36號</br>（大樹下西路及大旗領路交界）
                            <!--<i class="fal fa-angle-double-right"></i>-->
                        </span></a>
                    </li>
                    <li class="col-md-6">
                    <a href="javascript:void(0);" onclick="toMap2();">
                        <i class=""><img class="lazy" data-original="img/address2.png"/></i>
                        <span>
                      九龍荔枝角道822號2樓西翼</br>（港鐵荔枝角站D2出口） 
                            <!--<i class="fal fa-angle-double-right"></i>-->
                        </span></a>
                    </li>
                </ul>
            </content>
        </section>
      <section class="about-us dark-theme" style="background: #fff">
             <content class="container">
                <div>
                    <div id="map" style="height:400px;border:1px solid gray"></div>

                </div>      
                <div style="margin-top: 30px;" >
                    <div id="map2" style="height:400px;border:1px solid gray"></div>
                </div>                
            </content>
            <script>
            var w=window.screen.width;
            $('#map').css('width',w);
            $('#map2').css('width',w);
                 function init() {

    // 获取当前地理位置

    // navigator.geolocation.getCurrentPosition(function(position) {

    //  var coords = position.coords;

        // 设定地图参数，将用户的当前位置的经纬度设定为地图的中心点

        // var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);
    var latlng = new google.maps.LatLng(22.434501,114.029948);
    var latlng2 = new google.maps.LatLng(22.335928, 114.147905);


    var myOptions = {
      // 设定放大倍数
      zoom:19,
      // 将地图中心点设定为指定的坐标点
      center: latlng,
      // 指定地图类型
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    var myOptions2 = {
      // 设定放大倍数
      zoom:19,
      // 将地图中心点设定为指定的坐标点
      center: latlng2,
      // 指定地图类型
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };

      // 创建地图并在div中显示

    var map1;
    var map2;

    map1 = new google.maps.Map(document.getElementById("map"),myOptions);
    map2 = new google.maps.Map(document.getElementById("map2"),myOptions2);

    // 在地图上创建标记

    var marker = new google.maps.Marker({
      position: latlng,
      map: map1
    });

    var marker2 = new google.maps.Marker({
      position: latlng2,
      map: map2
    });

    // 设定标注窗口，并指定该窗口中的注释文字

    var infowindow = new google.maps.InfoWindow({

      content:"良師棚業有限公司"

    });

    var infowindow2 = new google.maps.InfoWindow({

      content:"良師棚業有限公司"

    });

    // 打开标注窗口

    infowindow.open(map1, marker);
    infowindow2.open(map2, marker2);

  // });
  }
//22.434501, 114.029948
//22.335928, 114.147905
            </script>
        </section>
    </main>

    <footer>
        <i class="fal fa-copyright"></i> <span class="current-year"></span>良師棚業有限公司</br> 版權所有 <br />
        
    </footer>

    <!--        Secondary Javascript        -->
    <script type="text/javascript" src="js/jquery.scrollto.min.js"></script>
    <script type="text/javascript" src="js/simplelightbox.min.js"></script>
    <script type="text/javascript">
	
        function ScrollPageToElement(jQuerySelector) { $("html, body").scrollTo($(jQuerySelector), 500); }

        $(function () {
            $(".brand").on("click", function () { ScrollPageToElement("nav"); });
        });

        $(function () {
            $("nav li").on("click", function () {
                var $this = $(this);
                ScrollPageToElement("main ." + $this.attr("data-section"));
            });
            $("nav .bars").on("click", function (e) { $(this).toggleClass("active"); e.stopPropagation(); });
            $(document).on("click", function () {
                $("nav .bars.active").removeClass("active");
            });
        });

        $(function () {
            var $Nav = $("nav");
            var $Main = $("main");
            var $Window = $(window);
            $Window.on("scroll", function () {
                if ($Window.scrollTop() > ($Main.position().top + 50)) {
                    $Nav.addClass("fixed-nav");
                    setTimeout(function () { $Nav.addClass("show"); }, 500);
                }
                else $Nav.removeClass("fixed-nav show");
            }).trigger("scroll");
        });

        $(function () { $('.news .lightbox a').simpleLightbox({ closeBtnClass: "fas fa-times" }); });

        $(function () {
            $(".current-year").text(new Date().getFullYear());
        });

        function toMap1(){
            var  h =$('#map').offset().top;
            $('body,html').animate({
               scrollTop:h
              }, 1000);
        }
        function toMap2(){
            var  h =$('#map2').offset().top;
            $('body,html').animate({
               scrollTop:h
              }, 1000);
        }
    </script>


   


    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="js/23ced510690b4a3cbcc791366394552d.js"></script>
    <script>
		
		if (document.location.protocol.toLowerCase().indexOf("file://") < 0) {
            window.dataLayer = window.dataLayer || [];
            function gtag() { dataLayer.push(arguments); }
            gtag('js', new Date());

            gtag('config', 'UA-63737888-8');
        }
    </script>
    <script src="js/swiper-4.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.lazyload.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
      var mySwiper = new Swiper ('.swiper-container', {
            
          autoplay: {
              delay: 6000, //1秒切换一次
              disableOnInteraction: false,
          },
          loop: true,

             // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
        });
      

        /**
         * 图片延时加载
         */
          $(function() {

              $("img.lazy").lazyload({effect: "fadeIn"});

          });    
    </script>
	 
</body>
</html>